<template>
	<div id="voca-list">
		<mu-container>
			<mu-card class="input-text">
				<mu-auto-complete
					:data="autoCompleteData"
					v-model="text"
					:placeholder="parse('Haxthon eraniros')"
				>
					<template #append v-if="text.length > 0">
						<span class="clear-text" @click="text = ''">✖</span>
					</template>
				</mu-auto-complete>
			</mu-card></mu-container
		>

		<div class="card-divide"></div>
		<mu-container>
			<mu-card>
				<mu-card-title
					:title="parse('Serothes')"
					:sub-title="
						parse('aleraniros ') +
						data.length +
						parse(' opheta ') +
						queryInfo.length
					"
				></mu-card-title>
				<mu-divider></mu-divider>

				<mu-list>
					<mu-list-item
						avatar
						button
						:key="item['0']"
						:ripple="false"
						:to="{ name: 'home', query: { text: item['0'] } }"
						v-for="item in queryInfo.slice(page * 10, page * 10 + 10)"
					>
						<mu-list-item-title
							>{{ parse(item["0"]) }} ~ {{ item["0"] }}</mu-list-item-title
						>
						<mu-list-item-action>
							<mu-avatar v-for="(subItem, index) in item.info" :key="index">
								<img v-no-drag :src="avatarList[subItem]" />
							</mu-avatar>
						</mu-list-item-action>
					</mu-list-item>
				</mu-list>
				<mu-card-actions>
					<mu-button flat :disabled="page < 1" @click="page = page - 1"
						><mu-icon value="arrow_back"></mu-icon
					></mu-button>
					<p>{{ page + 1 }} / {{ pageCount }}</p>
					<mu-button
						flat
						:disabled="page >= pageCount - 1"
						@click="page = page + 1"
						><mu-icon value="arrow_forward"></mu-icon
					></mu-button>
				</mu-card-actions> </mu-card
		></mu-container>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	ref,
	computed,
	watch,
	onUnmounted,
} from "@vue/composition-api";
import { titleText, getTransText } from "../utils/format";
import { avatarList } from "../assets/img/export";
import { TypeData } from "../store";
import { parse } from "../utils/phomita";
export default defineComponent({
	name: "voca-list",
	setup(props, ctx) {
		const page = ref(0);
		const text = ref("");
		const data = computed(() => ctx.root.$store.state.data as TypeData[]);
		const autoCompleteData = computed(() =>
			data.value.map((item) => item["0"])
		);
		const pageCount = computed(() =>
			Math.ceil(queryInfo.value.length / 10) > 0
				? Math.ceil(queryInfo.value.length / 10)
				: 1
		);
		const queryInfo = computed(() =>
			data.value
				.filter((item) => item["0"].startsWith(text.value))
				.map((item) => ({
					0: item["0"],
					info: getTransText(item).map((val) => val.avatar),
				}))
		);

		const watchText = watch([() => text.value], () => {
			page.value = 0;
		});

		onUnmounted(() => {
			watchText();
		});

		return {
			data,
			page,
			text,
			parse,
			pageCount,
			queryInfo,
			avatarList,
			autoCompleteData,
		};
	},
});
</script>

<style>
#voca-list {
	padding-top: 99px;

	@media screen and (max-width: 768px) {
		padding-top: 90px;
	}
}
#voca-list .card-divide {
	padding: 15px;
}

#voca-list .input-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 15px;
}
#voca-list .input-text .mu-input {
	width: 85%;
}
#voca-list .container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#voca-list .container .mu-card {
	width: 65%;
	@media screen and (max-width: 1200px) {
		width: 80%;
	}
	@media screen and (max-width: 768px) {
		width: 95%;
	}
}

#voca-list .container .mu-card .mu-item-action {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
}

#voca-list .container .mu-card .mu-item-action .mu-avatar {
	margin-left: 5px;
}

#voca-list .container .mu-card .mu-card-actions {
	display: flex;
	justify-content: space-around;
}
</style>
